<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三字段文本渲染工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        
        .container {
            display: flex;
            gap: 20px;
        }
        
        .controls {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .render-panel {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .field-group {
            margin-bottom: 25px;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
        }
        
        .field-group.cantonese {
            border-color: #ff6b6b;
        }
        
        .field-group.lyrics {
            border-color: #4ecdc4;
        }
        
        .field-group.homophonic {
            border-color: #45b7d1;
        }
        
        .field-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            padding: 5px 10px;
            border-radius: 4px;
            color: white;
        }
        
        .cantonese .field-title {
            background-color: #ff6b6b;
        }
        
        .lyrics .field-title {
            background-color: #4ecdc4;
        }
        
        .homophonic .field-title {
            background-color: #45b7d1;
        }
        
        textarea {
            width: 100%;
            height: 100px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            resize: vertical;
            box-sizing: border-box;
        }
        
        .style-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 15px;
        }
        
        .control-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .control-item label {
            font-size: 12px;
            min-width: 60px;
        }
        
        .control-item input, .control-item select {
            flex: 1;
            padding: 4px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 12px;
        }
        
        .control-item input[type="range"] {
            margin: 0 5px;
        }
        
        .value-display {
            font-size: 12px;
            min-width: 40px;
            color: #666;
        }
        
        .global-controls {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .global-controls h3 {
            margin: 0 0 15px 0;
            color: #333;
        }
        
        .global-control-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .global-control-item label {
            min-width: 80px;
            font-size: 14px;
        }
        
        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            transition: transform 0.2s;
        }
        
        button:hover {
            transform: translateY(-2px);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .render-area {
            width: 100%;
            min-height: 500px;
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            overflow-y: auto;
            background: white;
            font-family: Arial, sans-serif;
        }
        
        .render-line {
            margin-bottom: 20px;
            padding: 10px;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .render-line:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .render-line.selected {
            border: 2px solid #ffffff;
            background-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }
        
        .char-group {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            margin: 0 2px;
            min-width: 20px;
        }
        
        .char-cantonese, .char-lyrics, .char-homophonic {
            display: block;
            margin: 2px 0;
            line-height: 1.2;
        }
        
        .cantonese-text, .lyrics-text, .homophonic-text {
            display: block;
            margin: 5px 0;
            line-height: 1.4;
        }
        
        .lyrics-text {
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #333; margin-bottom: 30px;">三字段文本渲染工具</h1>
    
    <div class="container">
        <div class="controls">
            <!-- 全局设置 -->
            <div class="global-controls">
                <h3>全局设置</h3>
                <div class="global-control-item">
                    <label>背景颜色：</label>
                    <input type="color" id="bg-color" value="#00752b">
                </div>
                <div class="global-control-item">
                    <label>行间距：</label>
                    <input type="range" id="line-spacing" min="10" max="50" value="20">
                    <span id="line-spacing-value" class="value-display">20px</span>
                </div>
            </div>
            
            <!-- 粤语字段 -->
            <div class="field-group cantonese">
                <div class="field-title">粤语</div>
                <textarea id="cantonese-input" placeholder="请输入粤语内容，每行对应一句"> ceoi4  ceoi4  wui4  mong6     zang1  suk6  jyu1  bei2  ci2  dik1  maan5  soeng5 
  hung4  hung4  jing4  si6  nei5     zang6  ngo5  dik1  sam1  zung1  jim6  joeng4 
  jyu4  lau4  so4  leoi6     kei4  mong6  ho2  tai2  seot1  gim1  gin3  loeng6 
  ming4  san4  lei4  bit6  nei5     lou6  jaa5  heoi2  gu1  daan1  dak1  maan6  coeng4 
  jat1  seon3  gaan1     taai3  do1  dung1  sai1  jiu3  gong2 
  ho2  sik1  zik1  zoeng1  zoi6  gok3  jat1  fong1 
  zi2  hou2  sam1  sam1  baa2  ze2  hak1  zeon6  jing4  mong6 
  loi4  jat6  zung3  si3  cin1  cin1  kyut3  go1 
  piu1  jyu1  jyun5  fong1  ngo5  lou6  soeng5 
  loi4  jat6  zung3  si3  cin1  cin1  maan5  sing1 
  loeng6  gwo3  gam1  maan5  jyut6  loeng6 
  dou1  bei2  bat1  hei2  ze2  siu1  mei5  lai6 
  dou1  sai2  bat1  cing1  gam1  maan5  ngo5  so2  soeng2 
 Ah      jan1  nei5  gam1  maan5  gung6  ngo5  coeng3 
  lam4  hang4  lam4  bit6     coi4  deon6  gam2  oi1  soeng1  dik1  piu1  loeng6 
  jyun4  loi4  cyun4  si6  nei5     ling6  ngo5  dik1  si1  jik1  maan6  coeng4 
  ho4  nin4  ho4  jyut6     coi4  jau6  ho2  gam1  siu1  jat1  joeng6 
  ting4  lau4  jing4  mong6  leoi5     joeng6  ngaan5  zing1  gong2  bei2  ci2  lap6  coeng4 
  dong1  mau5  tin1     jyu5  dim2  hing1  haau1  nei5  coeng1 
  dong1  fung1  sing1  ceoi1  lyun6  nei5  gau3  soeng2 
  ho2  fau2  cau1  hung1  soeng2  ze2  zoeng1  gau6  mou4  joeng6 
  loi4  jat6  zung3  si3  cin1  cin1  kyut3  go1 
  piu1  jyu1  jyun5  fong1  ngo5  lou6  soeng5 
  loi4  jat6  zung3  si3  cin1  cin1  maan5  sing1 
  loeng6  gwo3  gam1  maan5  jyut6  loeng6 
  dou1  bei2  bat1  hei2  ze2  siu1  mei5  lai6 
  jik6  zyut6  bat1  ho2  si3  ngo5  gang1  jan1  soeng2 
 Ah      jan1  nei5  gam1  maan5  gung6  ngo5  coeng3 
 Ah      zam2  dou1  bei2  bat1  hei2  ze2  siu1  mei5  lai6 
  jik6  zyut6  bat1  ho2  si3  ngo5  gang1  jan1  soeng2 
 Ah      jan1  ngo5  gam1  maan5  gung6  nei5  coeng3 
  loi4  jat6  zung3  si3  cin1  cin1  kyut3  go1 
  piu1  jyu1  jyun5  fong1  ngo5  lou6  soeng5 
  loi4  jat6  zung3  si3  cin1  cin1  maan5  sing1 
  loeng6  gwo3  gam1  maan5  jyut6  loeng6 
  dou1  bei2  bat1  hei2  ze2  siu1  mei5  lai6 
  jik6  zyut6  bat1  ho2  si3  ngo5  gang1  jan1  soeng2 
 Ah      jan1  nei5  gam1  maan5  gung6  ngo5  coeng3 
  loi4  jat6  zung3  si3  cin1  cin1  kyut3  go1 
  piu1  jyu1  jyun5  fong1  ngo5  lou6  soeng5 
  loi4  jat6  zung3  si3  cin1  cin1  maan5  sing1 
  loeng6  gwo3  gam1  maan5  jyut6  loeng6 
  dou1  bei2  bat1  hei2  ze2  siu1  mei5  lai6 
  dou1  sai2  bat1  cing1  gam1  maan5  ngo5  so2  soeng2 
  jan1  bat1  zi1  naa5  tin1  zoi3  gung6  nei5  coeng3</textarea>
                <div class="style-controls">
                    <div class="control-item">
                        <label>字体：</label>
                        <select id="cantonese-font">
                            <option value="Arial, sans-serif">Arial</option>
                            <option value="'Microsoft YaHei', 微软雅黑, sans-serif" selected>微软雅黑</option>
                            <option value="SimSun, 宋体, serif">宋体</option>
                            <option value="SimHei, 黑体, sans-serif">黑体</option>
                            <option value="KaiTi, 楷体, serif">楷体</option>
                        </select>
                    </div>
                    <div class="control-item">
                        <label>大小：</label>
                        <input type="range" id="cantonese-size" min="12" max="36" value="14">
                        <span id="cantonese-size-value" class="value-display">14px</span>
                    </div>
                    <div class="control-item">
                        <label>颜色：</label>
                        <input type="color" id="cantonese-color" value="#000000">
                    </div>
                    <div class="control-item">
                        <label>描边色：</label>
                        <input type="color" id="cantonese-stroke-color" value="#ffffff">
                    </div>
                    <div class="control-item">
                        <label>描边：</label>
                        <input type="range" id="cantonese-stroke-width" min="0" max="3" value="1" step="0.5">
                        <span id="cantonese-stroke-value" class="value-display">1px</span>
                    </div>
                </div>
            </div>
            
            <!-- 歌词字段 -->
            <div class="field-group lyrics">
                <div class="field-title">歌词</div>
                <textarea id="lyrics-input" placeholder="请输入歌词内容，每行对应一句">徐徐回望 曾属于彼此的晚上
红红仍是你 赠我的心中艳阳
如流傻泪 祈望可体恤兼见谅
明晨离别你 路也许孤单得漫长
一瞬间 太多东西要讲
可惜即将在各一方
只好深深把这刻尽凝望
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
都洗不清今晚我所想
Ah 因你今晚共我唱
临行临别 才顿感哀伤的漂亮
原来全是你 令我的思忆漫长
何年何月 才又可今宵一样
停留凝望里 让眼睛讲彼此立场
当某天 雨点轻敲你窗
当风声吹乱你构想
可否抽空想这张旧模样
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因你今晚共我唱
Ah 怎都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因我今晚共你唱
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因你今晚共我唱
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
都洗不清今晚我所想
因不知哪天再共你唱</textarea>
                <div class="style-controls">
                    <div class="control-item">
                        <label>字体：</label>
                        <select id="lyrics-font">
                            <option value="Arial, sans-serif">Arial</option>
                            <option value="'Microsoft YaHei', 微软雅黑, sans-serif" selected>微软雅黑</option>
                            <option value="SimSun, 宋体, serif">宋体</option>
                            <option value="SimHei, 黑体, sans-serif">黑体</option>
                            <option value="KaiTi, 楷体, serif">楷体</option>
                        </select>
                    </div>
                    <div class="control-item">
                        <label>大小：</label>
                        <input type="range" id="lyrics-size" min="12" max="36" value="22">
                        <span id="lyrics-size-value" class="value-display">22px</span>
                    </div>
                    <div class="control-item">
                        <label>颜色：</label>
                        <input type="color" id="lyrics-color" value="#000000">
                    </div>
                    <div class="control-item">
                        <label>描边色：</label>
                        <input type="color" id="lyrics-stroke-color" value="#ffffff">
                    </div>
                    <div class="control-item">
                        <label>描边：</label>
                        <input type="range" id="lyrics-stroke-width" min="0" max="3" value="2" step="0.5">
                        <span id="lyrics-stroke-value" class="value-display">2px</span>
                    </div>
                </div>
            </div>
            
            <!-- 谐音字段 -->
            <div class="field-group homophonic">
                <div class="field-title">谐音</div>
                <textarea id="homophonic-input" placeholder="请输入谐音内容，每行对应一句">徐徐回望 曾属于彼此的晚上
红红仍是你 赠我的心中艳阳
如流傻泪 祈望可体恤兼见谅
明晨离别你 路也许孤单得漫长
一瞬间 太多东西要讲
可惜即将在各一方
只好深深把这刻尽凝望
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
都洗不清今晚我所想
Ah 因你今晚共我唱
临行临别 才顿感哀伤的漂亮
原来全是你 令我的思忆漫长
何年何月 才又可今宵一样
停留凝望里 让眼睛讲彼此立场
当某天 雨点轻敲你窗
当风声吹乱你构想
可否抽空想这张旧模样
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因你今晚共我唱
Ah 怎都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因我今晚共你唱
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
亦绝不可使我更欣赏
Ah 因你今晚共我唱
来日纵使千千阙歌
飘于远方我路上
来日纵使千千晚星
亮过今晚月亮
都比不起这宵美丽
都洗不清今晚我所想
因不知哪天再共你唱</textarea>
                <div class="style-controls">
                    <div class="control-item">
                        <label>字体：</label>
                        <select id="homophonic-font">
                            <option value="Arial, sans-serif">Arial</option>
                            <option value="'Microsoft YaHei', 微软雅黑, sans-serif" selected>微软雅黑</option>
                            <option value="SimSun, 宋体, serif">宋体</option>
                            <option value="SimHei, 黑体, sans-serif">黑体</option>
                            <option value="KaiTi, 楷体, serif">楷体</option>
                        </select>
                    </div>
                    <div class="control-item">
                        <label>大小：</label>
                        <input type="range" id="homophonic-size" min="12" max="36" value="22">
                        <span id="homophonic-size-value" class="value-display">22px</span>
                    </div>
                    <div class="control-item">
                        <label>颜色：</label>
                        <input type="color" id="homophonic-color" value="#940000">
                    </div>
                    <div class="control-item">
                        <label>描边色：</label>
                        <input type="color" id="homophonic-stroke-color" value="#ffffff">
                    </div>
                    <div class="control-item">
                        <label>描边：</label>
                        <input type="range" id="homophonic-stroke-width" min="0" max="3" value="2" step="0.5">
                        <span id="homophonic-stroke-value" class="value-display">2px</span>
                    </div>
                </div>
            </div>
            
            <button id="render-btn">刷新预览</button>
        </div>
        
        <div class="render-panel">
            <h2 style="margin-top: 0; color: #333;">渲染预览</h2>
            <div id="render-area" class="render-area">
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有控制元素
            const bgColor = document.getElementById('bg-color');
            const lineSpacing = document.getElementById('line-spacing');
            const renderBtn = document.getElementById('render-btn');
            const renderArea = document.getElementById('render-area');
            
            // 字段配置
            const fields = ['cantonese', 'lyrics', 'homophonic'];
            const fieldElements = {};
            
            // 初始化字段元素引用
            fields.forEach(field => {
                fieldElements[field] = {
                    input: document.getElementById(`${field}-input`),
                    font: document.getElementById(`${field}-font`),
                    size: document.getElementById(`${field}-size`),
                    color: document.getElementById(`${field}-color`),
                    strokeColor: document.getElementById(`${field}-stroke-color`),
                    strokeWidth: document.getElementById(`${field}-stroke-width`),
                    sizeValue: document.getElementById(`${field}-size-value`),
                    strokeValue: document.getElementById(`${field}-stroke-value`)
                };
            });
            
            // 初始化数值显示
            function initializeValues() {
                document.getElementById('line-spacing-value').textContent = lineSpacing.value + 'px';
                
                fields.forEach(field => {
                    const elements = fieldElements[field];
                    elements.sizeValue.textContent = elements.size.value + 'px';
                    elements.strokeValue.textContent = elements.strokeWidth.value + 'px';
                });
            }
            
            // 绑定数值变化事件和即时渲染
            function bindValueEvents() {
                // 全局设置的即时渲染
                bgColor.addEventListener('input', function() {
                    renderContent();
                });
                
                lineSpacing.addEventListener('input', function() {
                    document.getElementById('line-spacing-value').textContent = this.value + 'px';
                    renderContent();
                });
                
                // 为每个字段绑定即时渲染事件
                fields.forEach(field => {
                    const elements = fieldElements[field];
                    
                    // 文本输入框即时渲染
                    elements.input.addEventListener('input', function() {
                        renderContent();
                    });
                    
                    // 字体选择即时渲染
                    elements.font.addEventListener('change', function() {
                        renderContent();
                    });
                    
                    // 字体大小即时渲染
                    elements.size.addEventListener('input', function() {
                        elements.sizeValue.textContent = this.value + 'px';
                        renderContent();
                    });
                    
                    // 颜色即时渲染
                    elements.color.addEventListener('input', function() {
                        renderContent();
                    });
                    
                    // 描边颜色即时渲染
                    elements.strokeColor.addEventListener('input', function() {
                        renderContent();
                    });
                    
                    // 描边宽度即时渲染
                    elements.strokeWidth.addEventListener('input', function() {
                        elements.strokeValue.textContent = this.value + 'px';
                        renderContent();
                    });
                });
            }
            
            // 创建描边效果
            function createStrokeEffect(width, color) {
                if (width <= 0) return 'none';
                
                const shadows = [];
                for (let x = -width; x <= width; x++) {
                    for (let y = -width; y <= width; y++) {
                        if (x !== 0 || y !== 0) {
                            shadows.push(`${x}px ${y}px 0 ${color}`);
                        }
                    }
                }
                return shadows.join(', ');
            }
            
            // 渲染内容
            function renderContent() {
                const cantoneseLines = fieldElements.cantonese.input.value.split('\n').filter(line => line.trim());
                const lyricsLines = fieldElements.lyrics.input.value.split('\n').filter(line => line.trim());
                const homophonicLines = fieldElements.homophonic.input.value.split('\n').filter(line => line.trim());
                
                // 获取最大行数
                const maxLines = Math.max(cantoneseLines.length, lyricsLines.length, homophonicLines.length);
                
                if (maxLines === 0) {
                    renderArea.innerHTML = '<div style="text-align: center; color: #999; margin-top: 100px;">暂无内容显示</div>';
                    return;
                }
                
                // 设置背景色
                renderArea.style.backgroundColor = bgColor.value;
                
                let html = '';
                
                for (let i = 0; i < maxLines; i++) {
                    const cantoneseText = cantoneseLines[i] || '';
                    const lyricsText = lyricsLines[i] || '';
                    const homophonicText = homophonicLines[i] || '';
                    
                    // 分割文本为字符数组
                    const cantoneseChars = cantoneseText.trim().split(/\s+/).filter(char => char);
                    const lyricsChars = lyricsText.split('').filter(char => char.trim());
                    const homophonicChars = homophonicText.split('').filter(char => char.trim());
                    
                    // 获取最大字符数
                    const maxChars = Math.max(cantoneseChars.length, lyricsChars.length, homophonicChars.length);
                    
                    if (maxChars > 0) {
                        html += `<div class="render-line" data-line="${i}" style="margin-bottom: ${lineSpacing.value}px;">`;
                        
                        // 为每个字符位置创建一个字符组
                        for (let j = 0; j < maxChars; j++) {
                            html += '<div class="char-group">';
                            
                            // 粤语拼音
                            const cantoneseChar = cantoneseChars[j] || '';
                            if (cantoneseChar) {
                                const strokeEffect = createStrokeEffect(
                                    parseFloat(fieldElements.cantonese.strokeWidth.value),
                                    fieldElements.cantonese.strokeColor.value
                                );
                                
                                html += `<span class="char-cantonese" style="
                                    font-family: ${fieldElements.cantonese.font.value};
                                    font-size: ${fieldElements.cantonese.size.value}px;
                                    color: ${fieldElements.cantonese.color.value};
                                    text-shadow: ${strokeEffect};
                                    font-weight: bold;
                                ">${cantoneseChar}</span>`;
                            } else {
                                html += '<span class="char-cantonese">&nbsp;</span>';
                            }
                            
                            // 歌词
                            const lyricsChar = lyricsChars[j] || '';
                            if (lyricsChar) {
                                const strokeEffect = createStrokeEffect(
                                    parseFloat(fieldElements.lyrics.strokeWidth.value),
                                    fieldElements.lyrics.strokeColor.value
                                );
                                
                                html += `<span class="char-lyrics" style="
                                    font-family: ${fieldElements.lyrics.font.value};
                                    font-size: ${fieldElements.lyrics.size.value}px;
                                    color: ${fieldElements.lyrics.color.value};
                                    text-shadow: ${strokeEffect};
                                    font-weight: bold;
                                ">${lyricsChar}</span>`;
                            } else {
                                html += '<span class="char-lyrics">&nbsp;</span>';
                            }
                            
                            // 谐音
                            const homophonicChar = homophonicChars[j] || '';
                            if (homophonicChar) {
                                const strokeEffect = createStrokeEffect(
                                    parseFloat(fieldElements.homophonic.strokeWidth.value),
                                    fieldElements.homophonic.strokeColor.value
                                );
                                
                                html += `<span class="char-homophonic" style="
                                    font-family: ${fieldElements.homophonic.font.value};
                                    font-size: ${fieldElements.homophonic.size.value}px;
                                    color: ${fieldElements.homophonic.color.value};
                                    text-shadow: ${strokeEffect};
                                    font-weight: bold;
                                ">${homophonicChar}</span>`;
                            } else {
                                html += '<span class="char-homophonic">&nbsp;</span>';
                            }
                            
                            html += '</div>';
                        }
                        
                        html += '</div>';
                    }
                }
                
                renderArea.innerHTML = html;
                
                // 为每行添加点击事件监听器
                addLineClickEvents();
            }
            
            // 添加行点击事件功能
            function addLineClickEvents() {
                const lines = document.querySelectorAll('.render-line');
                
                lines.forEach(line => {
                    line.addEventListener('click', function(e) {
                        e.stopPropagation(); // 防止事件冒泡
                        
                        // 移除所有行的选中状态
                        lines.forEach(l => {
                            l.classList.remove('selected');
                            // 恢复原始字体大小
                            adjustLineFontSize(l, false);
                        });
                        
                        // 为当前行添加选中状态
                        this.classList.add('selected');
                        // 调大字体
                        adjustLineFontSize(this, true);
                    });
                });
                
                // 点击渲染区域的空白处取消选中
                renderArea.addEventListener('click', function() {
                    lines.forEach(l => {
                        l.classList.remove('selected');
                        adjustLineFontSize(l, false);
                    });
                });
            }
            
            // 调整行字体大小
            function adjustLineFontSize(line, increase) {
                const cantoneseSpans = line.querySelectorAll('.char-cantonese');
                const lyricsSpans = line.querySelectorAll('.char-lyrics');
                const homophonicSpans = line.querySelectorAll('.char-homophonic');
                
                const cantoneseSize = parseInt(fieldElements.cantonese.size.value);
                const lyricsSize = parseInt(fieldElements.lyrics.size.value);
                const homophonicSize = parseInt(fieldElements.homophonic.size.value);
                
                const adjustment = increase ? 3 : 0;
                
                cantoneseSpans.forEach(span => {
                    span.style.fontSize = (cantoneseSize + adjustment) + 'px';
                });
                
                lyricsSpans.forEach(span => {
                    span.style.fontSize = (lyricsSize + adjustment) + 'px';
                });
                
                homophonicSpans.forEach(span => {
                    span.style.fontSize = (homophonicSize + adjustment) + 'px';
                });
            }
            
            // 绑定渲染按钮事件（保留用于手动刷新）
            renderBtn.addEventListener('click', renderContent);
            
            // 初始化
            initializeValues();
            bindValueEvents();
            // 页面加载后立即进行一次渲染
            renderContent();
        });
    </script>
</body>
</html>